<template>
  <div class="setting">
    <!--
      tab栏
          el-tabs
              v-model:默认选中第一项
                      它的值是对应子项的name的值
            el-tab-pane:
                 label:标题
                 name:对应v-model的值
                 默认插槽就是内容

       table
         el-table
             data:绑定表格数据
            el-table-column
               label:当前栏的标题
               width:宽度
               prop:表格数据对应项的字段名
            序号：
              el-table-column
                 type:index
             自定义栏
               el-table-column
                  template v-slot="{$index,row}"
                   $index:下标
                   row:当前行的数据
          el-pagination
              current-page:默认选中第几页
              page-size：默认页容量
              page-sizes：页容量选项
              layout：布局配制
              total：总数
              @size-change：页容量改变后的回调
              @current-change页码改变后的回调

      查：
          1：定义api
          2:导入api
          3:进入页面就调用
          4：存储数据并渲染
          5：和分页进行关联处理
      增
        1：创建新增弹框组件
        2：在父组件使用弹框组件
        3：点击新增按钮打开弹框
        4：完成内部表单布局
        5：表单验证处理
        6：定义新增api
        7:导入新增api
        8:点击确定调用新增api
         调用成功
           a:提示
           b:清空表单数据
           c:关闭弹框
           d:刷新父级列表数据
       删：
         1：点击删除弹出确定框
         2：定义删除api
         3:点击确定时调用删除api
         4:调用成功
            a:提示
            b:刷新父级列表数据
              刷新父级列表数据前判断当前页码>1  && 总数据条数是否只有一条
                  如果满足上面二条件  页码--
                  再刷新父级列表数据

        改
        1：点击修改打开弹框
        2：在弹框组件定义一个变量用于区分场景  mode="add/edit"
        3:点击新增与修改都修改mode的值为相应的值
        4：数据回显（修改新增弹框组件内的form为当前行数据的值（深拷贝））
        5：根据场景调整标题
        6：如果有表单验证调整，还需要分场景调整
        7：定义编辑api
        8:导入
        9：点击确定分场景调用
           调用成功
             a:提示
             b:清空表单数据
             c:关闭弹框
             d:刷新父级列表数据

     -->
    <el-tabs>
      <el-tab-pane label="角色管理">
        <el-button type="primary" @click="addRole">新增角色</el-button>
        <el-table :data="list" border style="margin-top: 30px">
          <el-table-column label="序号" width="80">
            <template v-slot="{ $index }">
              <div>
                <!-- （页码-1）*页容量+$index+1 -->
                {{ (page.page - 1) * page.pagesize + $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="角色" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <div>
                <el-button
                  type="success"
                  size="small"
                  @click="setClick(row.id)"
                >分配权限</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="edit(row)"
                >编辑</el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="del(row)"
                >删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[1, 2, 5, 10, 20, 100, 200, 300, 400]"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="公司信息" lazy>
        <Info />
      </el-tab-pane>
    </el-tabs>
    <!-- 新增弹框组件 -->

    <!-- .sync
       子组件标签  :属性="父组件属性"   @update:属性="父组件属性=$event"
       子组件标签  :属性.sync="父组件属性"
       子组件内
          props:['属性']
          this.$emit('update:属性',实参值)
     -->
    <!-- <Add :is-show="show" @update:isShow="show = $event" /> -->
    <Add ref="add" :is-show.sync="show" @getData="getData" />
    <!-- 权限分配弹框 -->
    <!-- <SetPermission :is-show="showSet" @update:isShow="showSet = $event" /> -->
    <SetPermission ref="set" :is-show.sync="showSet" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
// 持久化：1：数据改变时存储到浏览器  2：初始值读取浏览器的值
// js-cookie
// 设置  jsCookie.set(key,value)
// 获取  jsCookie.get(key)
// 删除  jsCookie.remove(key)
// 1:修改页容量后存储
// 2：data中页容量读取浏览器的值
import jsCookie from 'js-cookie'
import Add from './components/add'
import SetPermission from './components/setPermission'
export default {
  components: {
    Add,
    SetPermission,
    // Info
    Info: () => import('./components/info') // 异步组件
  },
  data() {
    return {
      showSet: false,
      show: false,
      list: [],
      page: {
        page: 1, //	是	1	页码
        pagesize: +jsCookie.get('setting-pagesize') || 1, //	是	10	每页条数
        total: 100
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 页容量改变
    handleSizeChange(size) {
      // console.log(size)
      this.page.pagesize = size
      this.getData()
      jsCookie.set('setting-pagesize', size)
    },
    // 页码改变
    handleCurrentChange(page) {
      // console.log(page, this.page)
      this.page.page = page
      this.getData()
    },
    async getData() {
      const res = await sysRole(this.page)
      this.list = res.data.data.rows
      this.page.total = res.data.data.total
      // console.log('角色 列表', res)
    },
    // 新增角色点击
    addRole() {
      this.show = true
      this.$refs.add.mode = 'add'
    },
    // 删除点击
    del(row) {
      this.$confirm('您确定删除：' + row.name + '吗?', '提示')
        .then(async() => {
          await sysRoleDelete(row.id)
          this.$message.success('删除：' + row.name + '成功')
          // // 如果删除的该页只有一条数据且页码>1，页码--
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          // this.page.page = 1
          this.getData()
        })
        .catch(() => {})
    },
    // 修改
    edit(row) {
      this.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      // console.log(row)
    },
    // 分配权限点击事件
    setClick(id) {
      this.showSet = true
      this.$refs.set.getRoleInfo(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting {
  padding: 20px;
  .page {
    text-align: right;
    padding: 20px 0;
  }
}
</style>
